<template>
  <!-- 培训演练首页 -->
  <div class="content_border">
    <!-- 上 -->
    <div class="top_content">
      <div class="left">
        <table id="tab" cellpadding="1" cellspacing="1" border="1" width="100%" align="center">
          <caption
            style="color:#fff;text-align: center;border-top: 1px solid #808080;border-left: 1px solid #808080;border-right: 1px solid #808080;margin-top: 8px;">
            培训演练计划报送情况统计</caption>
          <tr>
            <th rowspan="2" style="height: 40px;font-size: 16px;font-weight: bold;width: 32px;">序号</th>
            <th rowspan="2" style="height: 40px;font-size: 16px;font-weight: bold;">单位</th>
            <th colspan="2" style="height: 40px;font-size: 16px;font-weight: bold;background-color: #4EB0FA;width: 60px">
              培训</th>
            <th colspan="2" style="height: 40px;font-size: 16px;font-weight: bold;background-color: #FCC95E;width: 60px">
              演练</th>
          </tr>
          <tr style="height: 30px;">
            <th class="box_back" style="width: 60px">应报</th>
            <th class="box_back" style="width: 60px">已报</th>
            <th style="width: 60px">应报</th>
            <th style="width: 60px">已报</th>
          </tr>
        </table>
        <div style="flex: 1;overflow: auto;" class="autoDiv">
          <table cellpadding="1" cellspacing="1" border="1" width="100%" align="center">
            <tr style="height: 22px;" v-for="(item, i) of tableData1" :key="i">
              <th style="width: 32px;">{{ i + 1 }}</th>
              <th>{{ item.cityName }}</th>
              <th style="width: 60px">{{ item.pxyb }}</th>
              <th style="width: 60px">{{ item.pxwc }}</th>
              <th style="width: 60px">{{ item.ylyb }}</th>
              <th style="width: 60px">{{ item.ylwc }}</th>
            </tr>
          </table>
        </div>
      </div>
      <div class="right">
        <div class="display_content">
          <div></div>
          <div class="right_select" style="opacity: 0;">
            <!-- <el-select v-model="value" placeholder="请选择" @change="handleSelectOne">
              <el-option v-for="item in options" :key="item.id" :label="item.orgOtherName" :value="item.id">
              </el-option>
            </el-select> -->
            <SelectOptions :value="sign1" :options="options" @change="handleSelectOne" />
          </div>
        </div>
        <div class="display_echarts">
          <!-- <div id="barleft" style="width:50%;height: 88%;"></div> -->
          <div>
            <div class="title_conten_left">应急培训各单位计划报送率</div>
            <!-- <div id="container" style="width:100%;height: 88%;"> -->
            <!-- <BarCharts :option="option1" chartId="yjglsysyx3" barChartsId="yjglsysyx4" v-if="isShowCharts1"></BarCharts> -->
            <!-- </div> -->
            <div style="width:100%;height: 88%;">
              <BarCharts :option="option3" chartId="zwtzsd11" barChartsId="zwtzsd12" :barColors="barColors">
              </BarCharts>
            </div>
          </div>
          <div>
            <div class="title_conten_right">应急演练各单位计划报送率</div>
            <!-- <div id="barRight" style="width:100%;height: 88%;"> -->
            <!-- <BarCharts :option="option2" chartId="yjglsysyx55" barChartsId="yjglsysyx66" v-if="isShowCharts1"></BarCharts> -->
            <!-- </div> -->
            <div style="width:100%;height: 88%;">
              <BarCharts :option="option4" chartId="zwtzsd21" barChartsId="zwtzsd22" :barColors="barColors2">
              </BarCharts>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下 -->
    <div class="bottom_content">
      <div class="title_box">
        <div class="title">培训演练执行情况统计表</div>
        <div style="width: 160px;opacity: 0;">
          <!-- <el-select v-model="value1" placeholder="请选择" @change="handleSelectTwo">
            <el-option v-for="item in options1" :key="item.id" :label="item.orgOtherName" :value="item.id">
            </el-option>
          </el-select> -->
          <SelectOptions :value="sign2" :options="options1" @change="handleSelectTwo" />
        </div>
      </div>
      <div class="YaPm">
        <table id="tab" cellpadding="1" cellspacing="1" border="1" width="100%" align="center" v-if="false">
          <tr>
            <th rowspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">序号</th>
            <th rowspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">单位</th>
            <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;" v-for="(item, i) of zxqkCityArr"
              :key="i + 'a'">{{ item }}</th>
          </tr>
          <tr>
            <th style="background-color: #4EB0FA;" v-for="(item, i) of zxqkArr" :key="i + 'b'">{{ i % 2 === 0 ? '培训' :
              '演练'
            }}</th>
          </tr>
          <tr style="height: 30px;">
            <th>1</th>
            <th>报送数</th>
            <th v-for="(item, i) of zxqkArr" :key="i + 'c'">{{ item.sumTotal }}</th>
          </tr>
          <tr style="height: 30px;">
            <th>2</th>
            <th>实际完成数</th>
            <th v-for="(item, i) of zxqkArr" :key="i + 'd'">{{ item.completionTotal }}</th>
          </tr>
          <tr style="height: 30px;">
            <th>3</th>
            <th>完成进度</th>
            <th v-for="(item, i) of zxqkArr" :key="i + 'e'">{{ item.completionRate }}</th>
          </tr>
        </table>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="xh" label="序号" align="center" width="50" fixed>
          </el-table-column>
          <el-table-column prop="dw" label="单位" align="center" width="120" fixed>
          </el-table-column>
          <el-table-column :label="item" align="center" v-for="(item, i) of zxqkCityArr" :key="i + 'a'">
            <el-table-column :prop="'px' + i" label="培训" align="center" width="90">
            </el-table-column>
            <el-table-column :prop="'yl' + i" label="演练" align="center" width="90">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
// import * as echarts from "echarts";
// import BarCharts from "@/components/highCharts/BarCharts.vue";
import BarCharts from "@/components/highCharts/NewBarCharts";
import {
  homePageListData, TrainDrillExecute
} from "@/api/TrainingAndExercise/DrillPlan/index.js";
// getLevelCitys
import { getEmergencyResourcesUnit } from "@/api/common.js";
import SelectOptions from "@/components/selectOptions.vue";
// import { createHistogram } from "perf_hooks";
export default {
  components: {
    BarCharts,
    SelectOptions
  },
  data() {
    return {
      sign1: "",
      sign2: "",
      tableData: [{
        xh: 1,
        dw: "报送数",
        px1: 12,
        yl1: 20
      },
      {
        xh: 2,
        dw: "实际完成数",
        px1: 12,
        yl1: 20
      },
      {
        xh: 3,
        dw: "完成进度",
        px1: 12,
        yl1: 20
      }],
      isShowCharts1: false,
      zxqkArr: [],
      zxqkCityArr: [],
      option1: {
        barWidth: 24, // 柱子宽度
        basePointX: 36,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "90%",
        qyNum: 5,
        sfbfb: 1, // 是否百分比
        tooltipXandY: {
          ch1: 90,
          ch2: 30,
          ch3: 96
        },
        grid: {
          left: 50, // 左边距离
          right: 0, // 右边距离
          top: 20,
          bottom: 6,
          containLabel: true
        },
        legends: ["数量"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: ["省公司", "武汉", "荆州", "襄阳", "宜昌"],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [[200], [55], [71], [22], [18]]
      },
      option2: {
        barWidth: 24, // 柱子宽度
        basePointX: 36,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "90%",
        qyNum: 5,
        sfbfb: 1, // 是否百分比
        tooltipXandY: {
          ch1: 90,
          ch2: 30,
          ch3: 96
        },
        grid: {
          left: 50, // 左边距离
          right: 0, // 右边距离
          top: 20,
          bottom: 6,
          containLabel: true
        },
        legends: ["数量"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: ["省公司", "武汉", "荆州", "襄阳", "宜昌"],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [[200], [55], [71], [22], [18]]
      },
      option3: {
        barWidth: 36, // 柱子宽度
        basePointX: 25,
        sfbfb: 1,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 60,
          ch2: 30,
          ch3: 100
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 24,
          bottom: 6,
          containLabel: true
        },
        legends: ["报送率"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "%",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      option4: {
        barWidth: 36, // 柱子宽度
        basePointX: 25,
        sfbfb: 1,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 60,
          ch2: 30,
          ch3: 100
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 24,
          bottom: 6,
          containLabel: true
        },
        legends: ["报送率"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "%",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      tableData1: [],
      tableDataBottom: {},
      options: [
      ],
      options1: [],
      value: "",
      value1: "",
      FilledBy: {},
      barColors: [
        { color2: "#2E58DB60", color1: "#4EB0FA" }
      ],
      barColors2: [
        { color2: "#f5e5ab40", color1: "#FCC95E" }
      ]
    };
  },
  mounted() {
    const FilledBy = {
      deptId: JSON.parse(sessionStorage.getItem("org")).orgId,
      creatorUnit: JSON.parse(sessionStorage.getItem("org")).orgName
    };
    this.FilledBy = FilledBy;
    this.jjjj();
    this.loadData();
    this.getZxqk();
  },
  methods: {
    jjjj() {
      getEmergencyResourcesUnit({ orgId: this.FilledBy.deptId }).then(res => {
        console.log(res);
        const arr1 = Object.keys(res).map((i) => { return res[i]; }); // 对象转化为数组
        // console.log(arr1);
        const option = arr1.map((i) => {
          return {
            label: i.orgOtherName,
            value: i.id
          };
        });
        this.options = option;
        console.log(this.options, "下拉狂数据");
        const arr2 = Object.keys(res).map((i) => { return res[i]; }); // 对象转化为数组
        // console.log(arr2);
        const optionOne = arr2.map((i) => {
          return {
            label: i.orgOtherName,
            value: i.id
          };
        });
        this.options1 = optionOne;
        console.log(this.options1, "下拉狂数据111");
      });
    },
    getZxqk() {
      TrainDrillExecute({ type: "train", orgId: this.FilledBy.deptId }).then(res1 => {
        res1 = [
          {
            "city": "孝感",
            "type": "培训",
            "sumTotal": 9,
            "completionTotal": 8,
            "completionRate": Math.floor(8 / 9 * 100) + "%",
            "ylbss": 11,
            "ylwcs": 1,
            "ylwcl": "9.00%"
          },
          {
            "city": "汉川市",
            "type": "培训",
            "sumTotal": 7,
            "completionTotal": 6,
            "completionRate": Math.floor(6 / 7 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "应城市",
            "type": "培训",
            "sumTotal": 8,
            "completionTotal": 8,
            "completionRate": Math.floor(8 / 8 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "安陆市",
            "type": "培训",
            "sumTotal": 7,
            "completionTotal": 7,
            "completionRate": Math.floor(7 / 7 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "孝南区",
            "type": "培训",
            "sumTotal": 6,
            "completionTotal": 5,
            "completionRate": Math.floor(5 / 6 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "云梦县",
            "type": "培训",
            "sumTotal": 2,
            "completionTotal": 2,
            "completionRate": Math.floor(2 / 2 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "大悟县",
            "type": "培训",
            "sumTotal": 7,
            "completionTotal": 6,
            "completionRate": Math.floor(6 / 7 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "孝昌县",
            "type": "培训",
            "sumTotal": 9,
            "completionTotal": 8,
            "completionRate": Math.floor(8 / 9 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "检修分公司",
            "type": "培训",
            "sumTotal": 10,
            "completionTotal": 8,
            "completionRate": Math.floor(8 / 10 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "综合能源",
            "type": "培训",
            "sumTotal": 9,
            "completionTotal": 8,
            "completionRate": Math.floor(8 / 9 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "信通公司",
            "type": "培训",
            "sumTotal": 6,
            "completionTotal": 6,
            "completionRate": Math.floor(6 / 6 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          },
          {
            "city": "路灯管理局",
            "type": "培训",
            "sumTotal": 8,
            "completionTotal": 7,
            "completionRate": Math.floor(7 / 8 * 100) + "%",
            "ylbss": 0,
            "ylwcs": 0,
            "ylwcl": "0%"
          }
        ];
        TrainDrillExecute({ type: "drill", orgId: this.FilledBy.deptId }).then(res2 => {
          console.log("123456", res2);
          res2 = [
            {
              "city": "孝感",
              "type": "培训",
              "sumTotal": 8,
              "completionTotal": 7,
              "completionRate": Math.floor(7 / 8 * 100) + "%"
            },
            {
              "city": "汉川市",
              "type": "培训",
              "sumTotal": 6,
              "completionTotal": 6,
              "completionRate": Math.floor(6 / 6 * 100) + "%"
            },
            {
              "city": "应城市",
              "type": "培训",
              "sumTotal": 8,
              "completionTotal": 7,
              "completionRate": Math.floor(7 / 8 * 100) + "%"
            },
            {
              "city": "安陆市",
              "type": "培训",
              "sumTotal": 8,
              "completionTotal": 6,
              "completionRate": Math.floor(6 / 8 * 100) + "%"
            },
            {
              "city": "孝南区",
              "type": "培训",
              "sumTotal": 10,
              "completionTotal": 9,
              "completionRate": Math.floor(9 / 10 * 100) + "%"
            },
            {
              "city": "云梦县",
              "type": "培训",
              "sumTotal": 8,
              "completionTotal": 7,
              "completionRate": Math.floor(7 / 8 * 100) + "%"
            },
            {
              "city": "大悟县",
              "type": "培训",
              "sumTotal": 5,
              "completionTotal": 4,
              "completionRate": Math.floor(4 / 5 * 100) + "%"
            },
            {
              "city": "孝昌县",
              "type": "培训",
              "sumTotal": 8,
              "completionTotal": 7,
              "completionRate": Math.floor(7 / 8 * 100) + "%"
            },
            {
              "city": "检修分公司",
              "type": "培训",
              "sumTotal": 10,
              "completionTotal": 7,
              "completionRate": Math.floor(7 / 10 * 100) + "%"
            },
            {
              "city": "综合能源",
              "type": "培训",
              "sumTotal": 6,
              "completionTotal": 5,
              "completionRate": Math.floor(5 / 6 * 100) + "%"
            },
            {
              "city": "信通公司",
              "type": "培训",
              "sumTotal": 9,
              "completionTotal": 8,
              "completionRate": Math.floor(8 / 9 * 100) + "%"
            },
            {
              "city": "路灯管理局",
              "type": "培训",
              "sumTotal": 6,
              "completionTotal": 5,
              "completionRate": Math.floor(5 / 6 * 100) + "%"
            }
          ];
          res1.forEach(el1 => {
            res2.forEach(el2 => {
              if (el1.city === el2.city) {
                el1.ylbss = el2.sumTotal;
                el1.ylwcs = el2.completionTotal;
                el1.ylwcl = el2.completionRate;
              }
            });
          });
          const newArr = [];
          const zxqkCityArr = [];
          res1.forEach((el, index) => {
            zxqkCityArr.push(el.city);
            this.tableData[0][`px${index}`] = el.sumTotal;
            this.tableData[0][`yl${index}`] = el.ylbss;
            this.tableData[1][`px${index}`] = el.completionTotal;
            this.tableData[1][`yl${index}`] = el.ylwcs;
            this.tableData[2][`px${index}`] = el.completionRate;
            this.tableData[2][`yl${index}`] = el.ylwcl;
            newArr.push(
              { city: el.city, sumTotal: el.sumTotal, completionTotal: el.completionTotal, completionRate: el.completionRate },
              { city: el.city, sumTotal: el.ylbss, completionTotal: el.ylwcs, completionRate: el.ylwcl }
            );
          });

          this.zxqkCityArr = zxqkCityArr;
          this.zxqkArr = newArr;
        });
      });
    },
    dataHandle(res) {
      const pxArr = [];
      const ylArr = [];
      const pxlArr = [];
      const yllArr = [];
      const cityArr1 = [];
      const cityArr2 = [];
      this.option3.xAxis[0].data = [];
      this.option3.series = [];
      this.option4.xAxis[0].data = [];
      this.option4.series = [];
      if (res) {
        for (const key in res) {
          // cityArr.push(key);
          if (res[key].length === 0) {
            pxArr.push({
              name: key,
              sumTotal: 0,
              completionTotal: 0
            });
            ylArr.push({
              name: key,
              sumTotal: 0,
              completionTotal: 0
            });
            pxlArr.push({ num: 0, city: key });
            yllArr.push({ num: 0, city: key });
          } else if (res[key].length === 1) {
            const item = res[key][0];
            if (item.type === "培训") {
              pxArr.push({
                name: key,
                sumTotal: item.sumTotal,
                completionTotal: item.completionTotal
              });
              ylArr.push({
                name: key,
                sumTotal: 0,
                completionTotal: 0
              });
              pxlArr.push({ num: parseInt(item.completionRate), city: key });
              yllArr.push({ num: 0, city: key });
            } else {
              ylArr.push({
                name: key,
                sumTotal: item.sumTotal,
                completionTotal: item.completionTotal
              });
              pxArr.push({
                name: key,
                sumTotal: 0,
                completionTotal: 0
              });
              pxlArr.push({ num: 0, city: key });
              yllArr.push({ num: parseInt(item.completionRate), city: key });
            }
          } else if (res[key].length === 2) {
            pxArr.push({
              name: key,
              sumTotal: res[key][0].sumTotal,
              completionTotal: res[key][0].completionTotal
            });
            ylArr.push({
              name: key,
              sumTotal: res[key][1].sumTotal,
              completionTotal: res[key][1].completionTotal
            });
            pxlArr.push({ num: parseInt(res[key][0].completionRate), city: key });
            yllArr.push({ num: parseInt(res[key][1].completionRate), city: key });
          }
        }
      }
      pxlArr.sort((a, b) => b.num - a.num);
      const numArr = [];
      pxlArr.forEach(el => {
        cityArr1.push(el.city);
        numArr.push(el.num);
      });
      console.log(numArr, "numArrnumArrnumArr");
      console.log(cityArr1, "cityArr1cityArr1cityArr1cityArr1");
      // this.option1.xAxis[0].data = cityArr1;
      // this.pxlList = numArr;
      this.option3.xAxis[0].data = cityArr1;
      numArr.forEach((el, index) => {
        this.option3.series.push([el]);
      });
      const list = numArr.map(el => {
        return [el];
      });
      this.option1.series = list.slice(0, 15);

      yllArr.sort((a, b) => b.num - a.num);
      const numArr2 = [];
      yllArr.forEach(el => {
        cityArr2.push(el.city);
        numArr2.push(el.num);
      });
      this.option4.xAxis[0].data = cityArr2;
      numArr2.forEach((el, index) => {
        this.option4.series.push([el]);
      });
      // this.option2.xAxis[0].data = cityArr2;
      // this.yllList = numArr2;
      const list2 = numArr2.map(el => {
        return [el];
      });
      this.option2.series = list2.slice(0, 15);
      this.isShowCharts1 = true;
    },
    loadData() {
      const parmas = {
        orgId: this.FilledBy.deptId
      };
      homePageListData(parmas).then(res => {
        res = {
          "孝感": [
            {
              "city": "1533835007302144",
              "type": "培训",
              "sumTotal": 20,
              "completionTotal": 19,
              "completionRate": Math.floor((19 / 20) * 100)
            },
            {
              "city": "1533835007302144",
              "type": "演练",
              "sumTotal": 20,
              "completionTotal": 18,
              "completionRate": Math.floor((18 / 20) * 100)
            }
          ],
          "汉川市": [
            {
              "city": "1533835007303136",
              "type": "培训",
              "sumTotal": 16,
              "completionTotal": 14,
              "completionRate": Math.floor((14 / 16) * 100)
            },
            {
              "city": "汉川市",
              "type": "演练",
              "sumTotal": 12,
              "completionTotal": 10,
              "completionRate": Math.floor((10 / 12) * 100)
            }
          ],
          "应城市": [
            {
              "city": "应城市",
              "type": "培训",
              "sumTotal": 13,
              "completionTotal": 12,
              "completionRate": Math.floor((12 / 13) * 100)
            },
            {
              "city": "应城市",
              "type": "演练",
              "sumTotal": 12,
              "completionTotal": 11,
              "completionRate": Math.floor((11 / 12) * 100)
            }
          ],
          "安陆市": [
            {
              "city": "安陆市",
              "type": "培训",
              "sumTotal": 13,
              "completionTotal": 11,
              "completionRate": Math.floor((11 / 13) * 100)
            },
            {
              "city": "安陆市",
              "type": "演练",
              "sumTotal": 10,
              "completionTotal": 8,
              "completionRate": Math.floor((8 / 10) * 100)
            }
          ],
          "孝南区": [
            {
              "city": "孝南区",
              "type": "培训",
              "sumTotal": 14,
              "completionTotal": 12,
              "completionRate": Math.floor((2 / 14) * 100)
            },
            {
              "city": "孝南区",
              "type": "演练",
              "sumTotal": 14,
              "completionTotal": 13,
              "completionRate": Math.floor((13 / 14) * 100)
            }
          ],
          "云梦县": [
            {
              "city": "1533835007304960",
              "type": "培训",
              "sumTotal": 12,
              "completionTotal": 10,
              "completionRate": Math.floor((10 / 12) * 100)
            },
            {
              "city": "云梦县",
              "type": "演练",
              "sumTotal": 10,
              "completionTotal": 9,
              "completionRate": Math.floor((9 / 10) * 100)
            }
          ],
          "大悟县": [
            {
              "city": "大悟县",
              "type": "培训",
              "sumTotal": 10,
              "completionTotal": 9,
              "completionRate": Math.floor((9 / 10) * 100)
            },
            {
              "city": "大悟县",
              "type": "演练",
              "sumTotal": 10,
              "completionTotal": 8,
              "completionRate": Math.floor((8 / 10) * 100)
            }
          ],
          "孝昌县": [
            {
              "city": "孝昌县",
              "type": "培训",
              "sumTotal": 10,
              "completionTotal": 9,
              "completionRate": Math.floor((9 / 10) * 100)
            },
            {
              "city": "孝昌县",
              "type": "演练",
              "sumTotal": 11,
              "completionTotal": 10,
              "completionRate": Math.floor((10 / 11) * 100)
            }
          ],
          "检修分公司": [
            {
              "city": "检修分公司",
              "type": "培训",
              "sumTotal": 10,
              "completionTotal": 10,
              "completionRate": Math.floor((10 / 10) * 100)
            },
            {
              "city": "检修分公司",
              "type": "演练",
              "sumTotal": 9,
              "completionTotal": 8,
              "completionRate": Math.floor((8 / 9) * 100)
            }
          ],
          "综合能源": [
            {
              "city": "综合能源",
              "type": "培训",
              "sumTotal": 8,
              "completionTotal": 7,
              "completionRate": Math.floor((7 / 8) * 100)
            },
            {
              "city": "综合能源",
              "type": "演练",
              "sumTotal": 10,
              "completionTotal": 9,
              "completionRate": Math.floor((9 / 10) * 100)
            }
          ],
          "信通公司": [
            {
              "city": "信通公司",
              "type": "培训",
              "sumTotal": 10,
              "completionTotal": 8,
              "completionRate": Math.floor((8 / 10) * 100)
            },
            {
              "city": "信通公司",
              "type": "演练",
              "sumTotal": 12,
              "completionTotal": 10,
              "completionRate": Math.floor((10 / 12) * 100)
            }
          ],
          "路灯管理局": [
            {
              "city": "路灯管理局",
              "type": "培训",
              "sumTotal": 10,
              "completionTotal": 9,
              "completionRate": Math.floor((9 / 10) * 100)
            },
            {
              "city": "路灯管理局",
              "type": "演练",
              "sumTotal": 9,
              "completionTotal": 8,
              "completionRate": Math.floor((8 / 9) * 100)
            }
          ]
        };
        this.dataHandle(res);
        const arr = [];
        for (const key in res) {
          const obj = {};
          obj.cityName = key;
          res[key].forEach(el => {
            if (el.type === "培训") {
              obj.pxyb = el.sumTotal;
              obj.pxwc = el.completionTotal;
            } else if (el.type === "演练") {
              obj.ylyb = el.sumTotal;
              obj.ylwc = el.completionTotal;
            }
          });
          arr.push(obj);
        }
        this.tableData1 = arr;
      });
    },
    handleSelectOne(val) {
      console.log(val);
      this.tableData1 = [];
      homePageListData({ orgId: val }).then(res => {
        this.dataHandle(res);
        const arr = [];
        for (const key in res) {
          const obj = {};
          obj.cityName = key;
          res[key].forEach(el => {
            if (el.type === "培训") {
              obj.pxyb = el.sumTotal;
              obj.pxwc = el.completionTotal;
            } else if (el.type === "演练") {
              obj.ylyb = el.sumTotal;
              obj.ylwc = el.completionTotal;
            }
          });
          arr.push(obj);
        }
        this.tableData1 = arr;
      });
    },
    handleSelectTwo(val) {
      console.log(val);
      this.zxqkCityArr = [];
      this.zxqkArr = [];
      TrainDrillExecute({ type: "train", orgId: val }).then(res1 => {
        TrainDrillExecute({ type: "drill", orgId: val }).then(res2 => {
          res1.forEach(el1 => {
            res2.forEach(el2 => {
              if (el1.city === el2.city) {
                el1.ylbss = el2.sumTotal;
                el1.ylwcs = el2.completionTotal;
                el1.ylwcl = el2.completionRate;
              }
            });
          });
          const newArr = [];
          const zxqkCityArr = [];
          res1.forEach((el, index) => {
            zxqkCityArr.push(el.city);
            this.tableData[0][`px${index}`] = el.sumTotal;
            this.tableData[0][`yl${index}`] = el.ylbss;
            this.tableData[1][`px${index}`] = el.completionTotal;
            this.tableData[1][`yl${index}`] = el.ylwcs;
            this.tableData[2][`px${index}`] = el.completionRate;
            this.tableData[2][`yl${index}`] = el.ylwcl;
            newArr.push(
              { city: el.city, sumTotal: el.sumTotal, completionTotal: el.completionTotal, completionRate: el.completionRate },
              { city: el.city, sumTotal: el.ylbss, completionTotal: el.ylwcs, completionRate: el.ylwcl }
            );
          });
          this.zxqkCityArr = zxqkCityArr;
          this.zxqkArr = newArr;
        });
      });

    },
    echartsLeft() {
      this.$Highcharts.chart("container", {
        chart: {
          type: "column",
          margin: 56,
          // inverted: true, // 横向
          backgroundColor: "transparent",
          options3d: {
            enabled: true,
            alpha: 0,
            beta: 10,
            depth: 70,
            viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
            frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
              // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
              // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
              bottom: {
                size: 10
              },
              side: {
                size: 1,
                color: "transparent"
              },
              back: {
                size: 1,
                color: "transparent"
              }
            }
          }
        },
        title: { // 去除 头部 chart title
          text: null
        },
        credits: { // 去除logo
          enabled: false
        },
        legend: { // 去除图例
          enabled: false
        },
        // colors: ["#5390F3", "#5390F3", "#5390F3", "#5FECE2", "#5FECE2", "#5FECE2", "#F1DD5E", "#F1DD5E", "#F1DD5E"],
        colors: ["#4EB0FA"],
        // title: {
        //   text: '包含空值的3D柱状图'
        // },
        // subtitle: {
        //   text: '请注意值为 0 和 null 的区别'
        // },
        plotOptions: {
          column: {
            depth: 25
          }
        },
        xAxis: {
          // categories: this.$Highcharts.getOptions().lang.shortMonths,
          categories: this.option1.xAxis[0].data,
          // categories: [
          //   [this.sbArrayBar[0].name],
          //   [this.sbArrayBar[1].name],
          //   [this.sbArrayBar[2].name],
          //   [this.pdArrayBar[0].name],
          //   [this.pdArrayBar[1].name],
          //   [this.pdArrayBar[2].name],
          //   [this.sdArrayBar[0].name],
          //   [this.sdArrayBar[1].name],
          //   [this.sdArrayBar[2].name],
          // ],
          gridLineColor: "transparent",
          labels: {
            step: 1, // 解决刻度文字显示不全问题
            rotation: 45, // 设置轴标签旋转角度
            staggerLines: 1,
            style: {
              color: "#fff", // 颜色
              fontSize: "14px" // 字体
            }
          }
        },
        yAxis: {
          title: {
            text: null
          },
          max: 100, // 定义Y轴 最大值
          min: 0, // 定义Y轴  最小值
          labels: {
            staggerLines: 1,
            format: "{value}%", // 定义Y轴 百分比
            style: {
              color: "#fff", // 颜色
              fontSize: "14px" // 字体
            }
          },
          gridLineColor: "#fff",
          gridLineDashStyle: "Dash",
          lineColor: "#22588F"
        },
        tooltip: {
          headerFormat: "<b>{point.key}</b>",
          // pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}',
          pointFormat: '<span style="color:{series.color}"></span>： {point.y}',
          backgroundColor: "rgba(22,66,120)",
          style: {
            color: "#fff"
          }
        },
        // plotOptions: { // 柱状图 顶部数值
        //   column: {
        //     pointPadding: 0.2,
        //     borderWidth: 0,
        //     dataLabels: {
        //       enabled: true, //设置显示对应y的值
        //       style: {
        //         color: '#fff',
        //       },
        //     }
        //   }
        // },


        series: [{
          // name: '销售',
          colorByPoint: true,
          data: this.pxlList
          // data: [
          //   [this.sbArrayBar[0].count],
          //   [this.sbArrayBar[1].count],
          //   [this.sbArrayBar[2].count],
          //   [this.pdArrayBar[0].count],
          //   [this.pdArrayBar[1].count],
          //   [this.pdArrayBar[2].count],
          //   [this.sdArrayBar[0].count],
          //   [this.sdArrayBar[1].count],
          //   [this.sdArrayBar[2].count]
          // ]
        }]
      });
    },
    echartsRight() {
      this.$Highcharts.chart("barRight", {
        chart: {
          type: "column",
          margin: 56,
          // inverted: true, // 横向
          backgroundColor: "transparent",

          options3d: {
            enabled: true,
            alpha: 0,
            beta: 10,
            depth: 70,
            viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
            frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
              // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
              // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
              bottom: {
                size: 10
              },
              side: {
                size: 1,
                color: "transparent"
              },
              back: {
                size: 1,
                color: "transparent"
              }
            }
          }
        },
        title: { // 去除 头部 chart title
          text: null
        },
        credits: { // 去除logo
          enabled: false
        },
        legend: { // 去除图例
          enabled: false
        },
        // colors: ["#5390F3", "#5390F3", "#5390F3", "#5FECE2", "#5FECE2", "#5FECE2", "#F1DD5E", "#F1DD5E", "#F1DD5E"],
        colors: ["#FCC95E"],
        // title: {
        //   text: '包含空值的3D柱状图'
        // },
        // subtitle: {
        //   text: '请注意值为 0 和 null 的区别'
        // },
        plotOptions: {
          column: {
            depth: 25
          }
        },
        xAxis: {
          // categories: this.$Highcharts.getOptions().lang.shortMonths,
          categories: this.option2.xAxis[0].data,
          gridLineColor: "transparent",
          labels: {
            step: 1, // 解决刻度文字显示不全问题
            rotation: 45, // 设置轴标签旋转角度
            staggerLines: 1,
            style: {
              color: "#fff", // 颜色
              fontSize: "14px" // 字体
            }
          }
        },
        yAxis: {
          title: {
            text: null
          },
          max: 100, // 定义Y轴 最大值
          min: 0, // 定义Y轴  最小值
          labels: {
            staggerLines: 1,
            format: "{value}%", // 定义Y轴 百分比
            style: {
              color: "#fff", // 颜色
              fontSize: "14px" // 字体
            }
          },
          gridLineColor: "#fff",
          gridLineDashStyle: "Dash",
          lineColor: "#22588F"
        },
        tooltip: {
          headerFormat: "<b>{point.key}</b>",
          // pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}',
          pointFormat: '<span style="color:{series.color}"></span>： {point.y}',
          backgroundColor: "rgba(22,66,120)",
          style: {
            color: "#fff"
          }
        },


        series: [{
          // name: '销售',
          colorByPoint: true,
          data: this.yllList
        }]
      });
    }
  }
};
</script>
<style scoped lang="less">
.content_border {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.top_content {
  display: flex;
  height: calc(100% - 366px);

  .left {
    width: 22%;
    height: 100%;
    border: 1px solid #22588f;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    td {
      color: #fff;
    }
  }

  .right {
    width: 77%;
    // height: 30%;
    height: 100%;
    border: 1px solid #22588f;
    margin-left: 10px;
    padding: 6px 10px;
    box-sizing: border-box;

    .display_content {
      display: flex;
      justify-content: space-between;
      margin: 12px;

      .right_select {
        width: 160px;
      }
    }

    .display_echarts {
      display: flex;
      width: 100%;
      height: 100%;
      position: relative;

      >div {
        flex: 1;
      }

      .title_conten_left {
        position: absolute;
        top: -30px;
        left: 25%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 18px;
        font-weight: bold;
      }

      .title_conten_right {
        position: absolute;
        top: -30px;
        right: 15%;
        transform: translateX(-25%);
        color: #fff;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
}


.bottom_content {
  margin-top: 10px;
  // width: 100%;
  height: 356px;
  display: flex;
  flex-direction: column;
  border: 1px solid #22588f;
  // padding: 6px 10px;

  .title_box {
    display: flex;
    justify-content: space-between;
    padding: 10px;

    .title {
      font-size: 18px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      color: #fff;
    }
  }
}

tr,
th {
  color: #fff;
}

/deep/ .el-input__inner {
  background-color: transparent;
  color: #fff;
  border: 1px solid #3076e3;
  font-size: 18px;
}

/deep/ .el-icon-arrow-up:before {
  color: #fff;
  font-size: 18px;
}

.autoDiv {
  &::-webkit-scrollbar {
    width: 0px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

.YaPm {
  flex: 1;

  :deep(.el-table__border-left-patch) {
    width: 0;
  }

  :deep(.el-table) {
    border: 1px solid #02a7f0;
    background: #08244c;
    padding: 0;

    tr {
      border: 1px solid #02a7f0;
      padding: 0;
      background: #08244c;
    }
  }

  :deep(.el-table__inner-wrapper::before) {
    width: 0;
  }

  :deep(.el-table--border::after) {
    width: 0;
  }

  :deep(.el-table--border::before) {
    width: 0;
  }

  :deep(.el-table--border .el-table__inner-wrapper::after) {
    width: 0;
  }

  :deep(.el-table__row) {
    background: #08244c;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background: #08244c !important;
  }

  :deep(.el-table__header th) {
    background: #08244c !important;
  }

  :deep(.el-table th.el-table__cell.is-leaf) {
    border-bottom: 0;
  }

  :deep(.el-table__cell) {
    background: #08244c;
    border: 1px solid #02a7f0;
    border-left: 0px;
    border-bottom: 0px;
    padding: 16px 0;

    .cell {
      color: #fff;
      // line-height: 20px;
    }
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    /*滚动条宽度*/
    height: 10px;
    /*滚动条高度*/
  }
}
</style>
